<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Post &amp; Update new event</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>                
        <link href="css/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css"/>
        <link href="css/doc.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/blog.css" rel="stylesheet" type="text/css"/>
        <link href="css/toastr.min.css" rel="stylesheet" type="text/css"/>
        <!-- Custom Fonts -->
        <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/plugins/timepicker/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css"/>
    </h:head>
    <h:body>
        <h:form id="formevent" onsubmit="return validate1();">           
            <div class="blog-masthead">
                <div class="container">
                    <nav class="blog-nav">
                        <a class="blog-nav-item active" href="events.xhtml"><i class="glyphicon glyphicon-list-alt"></i> Event Board</a>                                       
                    </nav>
                </div>
            </div><!--end bolg nav-->
            <div class="container-fluid">
                <div class=" row well">
                    <div class="col-lg-8 col-sm-8">   
                        <div class="form-group">
                            <c:choose>
                                <c:when test="#{updateEvent.id > 0}">
                                    <span class="text-primary control-label"><i class="fa fa-edit fa-fw"></i><em>Updating event id: #{updateEvent.id}</em>                                                
                                    </span>
                                    <span class="pull-right label label-primary"><i class="fa fa-clock-o fa-fw"></i><em>Created: </em>#{updateEvent.created}</span>
                                </c:when>
                                <c:when test="#{updateEvent.id == 0}">
                                    <span class="text-primary control-label"><i class="fa fa-bookmark fa-fw" ></i>Create new event..</span>
                                </c:when>                                        
                            </c:choose>                                    
                            <br/>  
                            <div class="controls">
                                <div class="input-prepend input-group">
                                    <span class="input-group-addon"><i class="fa fa-file-text"></i></span>
                                    <input id="eventName" name="eventName" placeholder="Event Title" class="form-control" size="16" type="text" value="#{updateEvent.name}" maxlength="200"/>
                                </div>                                        
                            </div>                            
                            <div class="form-group">                                 
                                <div class="bs-callout bs-callout-info col-xs-12"> 
                                    <div class="col-xs-12">
                                        <textarea id="shortdes" name="shortdes" class="form-control" placeholder="Write the short description of event..." rows="3" maxlength="200">#{updateEvent.shortdes}</textarea>
                                    </div>                                                
                                </div>	         
                            </div> 
                            <div>                                        
                                <textarea name="description" id="eventcontent" class="textarea form-control" placeholder="Enter text ..." style="width: 100%; height: 400px" maxlength="2000">
                                    #{updateEvent.description}
                                </textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="btn-group pull-right">                                    
                                    <a href="#mypreview" class="btn btn-default btn-sm pull-left">
                                        <span class="glyphicon glyphicon-star"></span> Show Preview
                                    </a>
                                    <c:choose>                                                                       
                                        <c:when test="#{updateEvent.id == 0}">                                            
                                            <h:commandButton value="Post" action="#{createEvent.createNewEvent()}" class="btn btn-sm btn-primary"></h:commandButton>
                                        </c:when>                                           
                                    </c:choose>       
                                    <h:commandButton value="Update" action="#{updateEvent.updateEvent()}" class="btn btn-sm btn-danger"/>
                                </div>
                            </div>
                        </div>
                        <br/>
                    </div>
                    <div class="col-lg-4 col-sm-4">
                        <div class="panel-group">    
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                            <span class="pull-left"><i class="fa fa-map-marker fa-fw"></i>Address</span>
                                            <span class="pull-right">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" style="color: #000;">
                                                    <i class="fa fa-plus-square"></i>
                                                </a>
                                            </span>                                                    
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseThree" class="panel-collapse collapse in">
                                    <h:form id="formhehe">
                                        <p:autoComplete                                              
                                            id="acSimple" 
                                            value="#{autoCompleteView.address}" var="it" 
                                            itemLabel="#{it}" itemValue="#{it}" 
                                            completeMethod="#{autoCompleteView.completeText}">
                                            <p:ajax event="itemSelect" process="@this" update=":formevent:formhehe:mustRefresh"  listener="#{autoCompleteView.searchGoogleMap()}"/> 
                                        </p:autoComplete>
                                        <p:panel id="mustRefresh">
                                            <iframe width="100%" height="380"  frameborder="0" style="border:0"
                                                    src="#{autoCompleteView.path}">
                                            </iframe>
                                        </p:panel>
                                    </h:form>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                            <span class="pull-left"><i class="fa fa-clock-o fa-fw"></i> Pick time</span>
                                            <span class="pull-right">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="color: #000;">
                                                    <i class="fa fa-plus-square"></i>
                                                </a>
                                            </span>                                            

                                        </div>
                                    </div>                                            
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="form-group"> 
                                            <label class="control-label label label-primary">
                                                <i class="fa fa-calendar fa-fw"></i> Pick date:
                                            </label>                                            
                                            <div class="col-xs-12 input-group">
                                                <span class="input-group-addon">S</span>
                                                <input id="timeS" name="timeS" type="text" class="form-control date-picker" data-date-format="yyyy/mm/dd" value="#{updateEvent.timeS}"/> 
                                                <span class="input-group-addon">E</span>
                                                <input id="timeE" name="timeE" type="text" class="form-control date-picker" data-date-format="yyyy/mm/dd" value="#{updateEvent.timeE}"/>                                                        
                                            </div>                                            
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label label label-primary">
                                                <i class="fa fa-clock-o fa-fw"></i> Input Time
                                            </label>
                                            <div class="col-xs-12 input-group bootstrap-timepicker">
                                                <span class="add-on input-group-addon">S</span>
                                                <input id="timepickerS" name="timepS" type="text" class="input-small"/>
                                                <span class="add-on input-group-addon">E</span>
                                                <input id="timepickerE" name="timepE" type="text" class="input-small"/>                                                
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <span class="pull-right text-muted small">Date format: yyyy/mm/dd HH:mm:ss</span>
                                        </div>                                        
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                            <span class="pull-left"><i class="fa fa-tags fa-fw"></i> TAGS &amp; CATEGORIES</span>
                                            <span class="pull-right">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" style="color: #000;">
                                                    <i class="fa fa-plus-square"></i>
                                                </a>
                                            </span>                                                    
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="form-group"> 
                                            <label class="control-label label label-primary">
                                                <i class="fa fa-tag fa-fw"></i> Pick event type:
                                            </label>
                                            <div class="col-xs-12 input-group">
                                                <span class="input-group-addon"><i class="fa fa-tag fa-fw"></i></span>
                                                <select name="eventType" class="form-control">
                                                    <option>Talk show</option>
                                                    <option>Game</option>
                                                    <option>Meeting</option>
                                                    <option>Entertainment</option>                                                            
                                                    <option>Open Talk</option>                                                            
                                                    <option>Other</option>                                                            
                                                </select>
                                            </div>	         
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                            <span class="pull-left"><i class="fa fa-picture-o fa-fw"></i> Event avatar</span>
                                            <span class="pull-right">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" style="color: #000;">
                                                    <i class="fa fa-plus-square"></i>
                                                </a>
                                            </span>                                                    
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseFour" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="form-group"> 
                                            <label class="control-label label label-primary">
                                                <i class="fa fa-image fa-fw"></i> Insert image link:
                                            </label>
                                            <div class="col-xs-12 input-group bs-callout bs-callout-info">                                                
                                                <input id="avatar" name="avatar" type="text" class="form-control" placeholder="http://" value="#{updateEvent.avatar}" maxlength="200"/>
                                            </div>	         
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>   
            <!--End page-wrapper-->            
        </h:form>

        <!-- Footer -->
        <div class="blog-footer">
            <p><a href="#">Blue Pumpkin</a> is a project maintained by Group 1 - C1209I.
                <br/>@ Copyright Blue Pumpkin 2014</p>
        </div><!--end blog footer-->
        <script src="js/wysihtml5-0.3.0.js"></script>
<!--        <script src="js/jquery-1.11.0.js" type="text/javascript"></script>-->
        <script src="js/bootstrap3-wysihtml5.js" type="text/javascript"></script>      
        <script src="js/bootstrap.min.js"></script> 
        <!--time picker-->      
        <script src="js/plugins/timepicker/bootstrap-timepicker.min.js" type="text/javascript"></script>
        <script src="js/plugins/timepicker/bootstrap-datepicker.min.js" type="text/javascript"></script>
        <script src="js/plugins/timepicker/jquery.cleditor.min.js" type="text/javascript"></script>
        <script src="js/plugins/timepicker/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
        <script src="js/toastr.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            toastr.options = {
                "closeButton": false,
                "debug": false,
                "positionClass": "toast-bottom-full-width", "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            function validate() {
                var eventname = document.getElementById("eventName").value;
                var eventcontent = document.getElementById("eventcontent").value;
                var timeS = document.getElementById("timeS").value;
                var timeE = document.getElementById("timeE").value;
                var avatar = document.getElementById("avatar").value;
                var shortdes = document.getElementById("shortdes").value;
                var timepickerS = document.getElementById("shortdes").value;
                var timepickerE = document.getElementById("shortdes").value;
                if (eventname === "") {
                    toastr.error('Please enter event name.');
                    return false;
                }
                if (eventcontent === "") {
                    toastr.error('Please enter event content.');
                    return false;
                }
                if (timeS === "") {
                    toastr.error('Please choose time start.');
                    return false;
                }
                if (timeE === "") {
                    toastr.error('Please choose time end.');
                    return false;
                }
                if (avatar === "") {
                    toastr.error('Please enter event link avatar.');
                    return false;
                }
                if (shortdes === "") {
                    toastr.error('Please enter short description.');
                    return false;
                }
                if (timepickerS === "") {
                    toastr.error('Please pick time start.');
                    return false;
                }
                if (timepickerE === "") {
                    toastr.error('Please pick time end.');
                    return false;
                }
                return true;
            }
            ;
            $('document').ready(function() {
                $('#mypreview').click(function(e) {
                    e.preventDefault();
                    $(this).modal('show');
                });
                /* ---------- Datapicker ---------- */
                $('.date-picker').datepicker();
                $('#timepickerS').timepicker({
                    minuteStep: 1,
                    template: 'dropdown',
                    appendWidgetTo: 'body',
                    showSeconds: true,
                    showMeridian: false,
                    defaultTime: false
                });
                $('#timepickerE').timepicker({
                    minuteStep: 1,
                    template: 'dropdown',
                    appendWidgetTo: 'body',
                    showSeconds: true,
                    showMeridian: false,
                    defaultTime: false
                });
                /* ---------- textarea ---------- */
                $('#eventcontent').wysihtml5();
                $(prettyPrint);

            });

        </script>
    </h:body>
</html>
